<template>
  <el-card>
    <el-form :inline="true" ref="searchFormRef" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="searchRoleName" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="searchRoleName.length > 0 ? false : true" size="default" icon="Search"
          @click="handlerSearch">查询</el-button>
        <el-button type="primary" size="default" icon="Refresh" @click="handlerReset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin: 10px 0px;">
    <el-button icon="Plus" @click="handlerAddRole">添加角色</el-button>
    <el-table :data="roleList" style="width: 10px 0px" border>
      <el-table-column type="index" label="#" width="80" align="center"></el-table-column>
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="120" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="description" label="角色描述" width="120"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="createdDate" label="创建时间" width="120"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="updatedDate" label="更新时间" width="120"></el-table-column>
      <el-table-column label="操作" width="260" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <el-button size="small" type="primary" icon="User" @click="handlerDispatcherPermission(row)">分配权限</el-button>
          <el-button type="primary" size="small" icon="Edit" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm class="box-item" :title="`确定删除${row.roleName}吗`" placement="top-start" width="200"
            @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger" size="small" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器信息 -->
    <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 20]"
      :background="true" layout="prev, pager, next, jumper, ->,sizes,total" :total="total"
      @current-change="handlerCurrentChange" @size-change="handlerSizeChange" />
    <!-- 添加角色 -->
    <el-dialog v-model="dialogVisible" title="添加角色" width="30%">
      <el-form ref="roleAddFormRef" :model="roleParam">
        <el-form-item label="角色名称">
          <el-input v-model="roleParam.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleParam.description" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer="{ row }">
        <span class="dialog-footer">
          <el-button @click="roleAddCancel(row)">取消</el-button>
          <el-button type="primary" @click="roleAddConfirm(row)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分配权限的抽屉 -->
    <el-drawer v-model="permissionDrawer" direction="rtl">
      <template #header>
        <h4>全部数据</h4>
      </template>
      <template #default>
        <el-tree ref="treeRef" :data="menuList" show-checkbox node-key="id" :default-expand-all="true"
          :default-checked-keys="checkedIdList" :props="defaultProps" />
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="handlerPermissionCancel">取消</el-button>
          <el-button type="primary" @click="HandlerPermissionConfirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="roleEditDrawer" direction="rtl">
      <template #header>
        <h4>角色编辑</h4>
      </template>
      <template #default>
        <!-- todo -->
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="handlerRoleEditCancel">取消</el-button>
          <el-button type="primary" @click="HandlerRoleEditConfirm">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 编辑的抽屉 -->
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useLayOutSettingStore from '@/store/modules/setting';
import { UserRole, UserRoleList } from '@/api/acl/role/type';
import { MenuList, MenuVO } from '@/api/acl/menu/type';
import { reqAssign, reqGetPermissionList } from '@/api/acl/menu';
import { ElMessage } from 'element-plus';



let settingStore = useLayOutSettingStore();
let searchFormRef = ref<any>();
let searchRoleName = ref('');
let roleList = ref<UserRoleList>([]);
let dialogVisible = ref<boolean>(false);
let permissionDrawer = ref<boolean>(false);
let roleEditDrawer = ref<boolean>(false);
let roleAddFormRef = ref<any>();
let pageIndex = ref<number>(1);
let pageSize = ref<number>(3);
let total = ref<number>(0);

let roleParam = ref<UserRole>({

})
const defaultProps = {
  children: 'children',
  label: 'name',
}

let menuList = ref<MenuList>([]);

let checkedIdList = ref<number[]>([]);

let treeRef = ref<any>();


// 过滤出第四层select 为真的id
const filterSelectAttr = (menuList: MenuList, initAttr: number[]) => {
  menuList.forEach(item => {
    if (item.selected && item.level == 4) {
      initAttr.push(item.id as number);
    }
    if (item.children && item.children.length > 0) {
      filterSelectAttr(item.children, initAttr)
    }
  })
  return initAttr;
}

const handlerSizeChange = () => {

  // todo
}


const handlerCurrentChange = () => {
  // getRoleList();
}

const roleAddConfirm = (row: UserRole) => {
  // 

  dialogVisible.value = false;

}

const roleAddCancel = (row: UserRole) => {
  dialogVisible.value = false;

}


const handlerRoleEditCancel = () => {

}

const HandlerRoleEditConfirm = () => {

}

const HandlerPermissionConfirm = async () => {
  const roleId = roleParam.value.id;
  // 被选中的节点的id
  let selectedIdList = treeRef.value.getCheckedKeys();
  // 被班选中的节点的id
  let halfSelectedIdList = treeRef.value.getHalfCheckedKeys();
  //  两个数组合并 1
  // selectedIdList = selectedIdList.concat(halfSelectedIdList);
  //  两个数组合并 2
  selectedIdList = [...selectedIdList, ...halfSelectedIdList];
  let result = await reqAssign(roleId as number, selectedIdList);
  if (result.code != 200) {
    ElMessage.error(result.message);
    return;
  }
  permissionDrawer.value = false;
  ElMessage.success(result.message);
  // 页面刷新
  window.location.reload();
}
const handlerPermissionCancel = () => {

}

const handleDelete = (row: UserRole) => {

}
const handleEdit = (row: UserRole) => {

}

const handlerDispatcherPermission = async (row: UserRole) => {
  // 抽屉显示出来
  permissionDrawer.value = true;
  // 收集当前要分类权限的职位的数据
  Object.assign(roleParam, row);
  // 根据职位获取权限的数据
  let result = await reqGetPermissionList(roleParam.value.id as number);
  if (result.code != 200) {
    ElMessage.error(result.message);
    return;
  }
  if (!result.data) {
    return;
  }
  menuList.value = result.data;
  checkedIdList.value = filterSelectAttr(menuList.value, []);
}

const handlerAddRole = () => {

}


// 重置
const handlerReset = () => {
  settingStore.refresh = !settingStore.refresh;
};

// 搜索
const handlerSearch = () => {

  // todo
};
</script>

<style scoped lang="scss">
.demo-form-inline {
  display: flex; // 让item 横向排列
  justify-content: space-between; // 让两个item分属不同的两边
  align-items: center; // 让item 纵向居中
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>